클라이언트-서버 간 API 통신 문제 해결 CORS, Mixed Content, URL 경로 설정 트러블슈팅

문제 상황

서버 구성

문제 원인

Cross-Origin 요청 문제

Mixed Content 문제

하드코딩된 API 주소

해결 방법

1. Nginx 설정 수정

# 80 포트에서 443 포트로 리다이렉트
server {
    listen 80;
    server_name [도메인];
    return 301 https://$host$request_uri;
}

# 443 포트에서의 메인 서버 설정
server {
    listen 443 ssl;
    server_name [도메인];
    ssl_certificate [인증서 경로];
    ssl_certificate_key [키 파일 경로];
    ssl_protocols TLSv1.2 TLSv1.3;
    ssl_prefer_server_ciphers on;
    ssl_ciphers ECDHE-RSA-AES256-GCM-SHA512:DHE-RSA-AES256-GCM-SHA512:ECDHE-RSA-AES256-GCM-SHA384:DHE-RSA-AES256-GCM-SHA384;
    ssl_session_timeout 1d;
    ssl_session_cache shared:SSL:10m;
    
    # API 요청을 백엔드로 프록시
    location /api/ {
        proxy_pass http://[내부IP]:8080;
        proxy_http_version 1.1;
        proxy_set_header Host $host;
        proxy_set_header X-Real-IP $remote_addr;
        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
        proxy_set_header X-Forwarded-Proto $scheme;
        proxy_set_header Origin https://[도메인];
        proxy_set_header Referer https://[도메인];
    }
    
    location / {
        proxy_pass http://127.0.0.1:5173;
        proxy_http_version 1.1;
        proxy_set_header Host $host;
        proxy_set_header X-Real-IP $remote_addr;
        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
        proxy_set_header X-Forwarded-Proto $scheme;
    }
}

# 5173 포트 서버 설정
server {
    listen 5173;
    server_name _;
    # 로그 수집 중지
    access_log off;
    error_log /dev/null;
    root [프론트엔드 경로];
    index index.html;
    location / {
        try_files $uri $uri/ /index.html;
    }
    error_page 404 /index.html;
}

2. 프론트엔드 코드 수정

// 변경 전 (문제가 있는 코드)
axios.post('http://[서버IP]:8080/api/v1/auth/login', data)

// 변경 후 (올바른 코드)
axios.post('/api/v1/auth/login', data)

3. 설정 및 코드 수정 후 테스트

Nginx 설정 저장 후 문법 검사 및 재시작:

nginx -t
systemctl reload nginx

문제 해결 확인 테스트:

curl -v -X POST http://[내부IP]:8080/api/v1/auth/login \
  -H "Content-Type: application/json" \
  -H "Origin: https://[도메인]" \
  -H "Referer: https://[도메인]" \
  -d '{"loginId":"[사용자ID]","password":"[비밀번호 해시]"}'

주요 개념 정리

브라우저의 Same-Origin 정책

상대 경로 vs 절대 경로

Nginx 프록시의 역할

localhost의 의미

Mixed Content 이슈

최종 요약